<template>
  <div>
   
    <div class="header">
      <div class="left">
        <el-row>
          <el-button type="info" class="el-icon-arrow-left" @click="goback">返回</el-button>
        </el-row>
      </div>
    </div>

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="分类">
        <el-select v-model="form.drug_class_name">
         <el-option   v-for="item in optionone" :label="item.drug_class_name" :value="item.drug_class_name"></el-option>
         <el-option   v-for="item in  optiontw" :label="item.drug_class_name" :value="item.drug_class_name"></el-option>

        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.status_value">
                    <el-option v-for="item in option" :label="item.status_value" :value="item.status_value"></el-option>
          <!-- <el-option label="无效" value="无效"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="药品名称">
        <el-input v-model="form.drug_name"></el-input>
      </el-form-item>
      <el-form-item label="药品编号">
        <el-input v-model="form.serial_number"></el-input>
      </el-form-item>
      <el-form-item label="条形码">
        <el-input  v-model="form.bar_code"></el-input>
      </el-form-item>
      <el-form-item label="型号">
        <el-input  v-model="form.model"></el-input>
      </el-form-item>
      <el-form-item label="单位">
        <el-input  v-model="form.unit"></el-input>
      </el-form-item>
      <el-form-item label="数量">
        <el-input  v-model="form.inventory"></el-input>
      </el-form-item>
      <el-form-item label="标签">
        <el-input  v-model="form.label"></el-input>
      </el-form-item>
      <el-form-item label="供应商">
        <div style="margin-top: 15px">
             <el-input v-model="form.supplier_name">
             </el-input>
            <el-button slot="append" @click="dialogTableVisible = true" class="chazhao">查找</el-button>
          </el-input>
        </div>
      </el-form-item>
      <hr />
      <el-form-item label="客户单价">
        <el-input v-model="form.unit_price"></el-input>
      </el-form-item>
      <el-form-item label="成本价">
        <el-input v-model="form.cost_price"></el-input>
      </el-form-item>
      <el-form-item label="特价">
        <el-input v-model="form.special_price"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="form.is_sale">是否付款</el-checkbox>
      </el-form-item>
      <hr />
      <!-- <el-form-item class="text"> -->
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="html"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
      />
      <!-- </el-form-item> -->
      <hr />
      <el-upload
  ref="uploadd"
  action=""
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :http-request="uploading"
  >
  <i class="el-icon-plus"></i>
</el-upload>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
 <!-- 患者查找弹框 -->
    <el-dialog title="查找患者" :visible.sync="dialogTableVisible">
     <div style="margin-top: 15px;">
  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
</div>
       <el-table :data="gridData">
        <el-table-column
          property="date"
          label="类型"
          width="100"
        ></el-table-column>
        <el-table-column
          property="name"
          label="患者名称"
          width="100"
        ></el-table-column>
        <el-table-column property="" label="性别"></el-table-column> 
       <el-table-column property="" label="年龄"></el-table-column>
        <el-table-column property="" label="手机号码"></el-table-column>
        <el-table-column property="" label="身份证号"></el-table-column>
        <el-table-column property="" label="负责人"></el-table-column>
        <el-table-column property="" label="状态"></el-table-column>
        <el-table-column property="" label="操作" width="150">
           <el-button type="success" class="el-icon-circle-plus-outline"
            >选择该患者</el-button>
        </el-table-column>

      </el-table>
      <el-pagination
  small
  layout="prev, pager, next"
  :total="50">
</el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { add, option, optiontw } from "../../utils/api/Drug";
export default {
  name: "",
  components: {
    Editor,
    Toolbar,
  },
  created() {
    option().then((data) => {
      this.option = data.data.data;
    }),
      optiontw().then((data) => {
        this.optiontw = data.data.data[0].children;
        this.optiontw1 = data.data.data[0].children[0].children;
        this.optionone = data.data.data;
        console.log(data);
      });
  },
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      form: {
        drug_class_name: null,
        is_sale: null,
        special_price: null,
        cost_price: null,
        unit_price: null,
        supplier_name: null,
        label: null,
        inventory: null,
        unit: null,
        model: null,
        bar_code: null,
        serial_number: null,
        drug_name: null,
        status_value: null,
        drug_class_name: null,
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      checked: true,
      editor: null,
      html: "",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
      dialogImageUrl: "",
      dialogVisible: false,
      input3: "",
      file: null,
      option: [],
      optiontw: [],
      optionone: [],
    };
  },
  methods: {
    uploading(file) {
      console.log(file);
      this.file = file.file;
    },
    onSubmit() {
      if (this.file != null) {
        this.all.file = this.file;
      }
      this.form.is_sale = 1;
      console.log(this.file);
      let formData = new FormData();
      console.log(formData);
      for (let key in this.form) {
        formData.append(key, this.form[key]);
      }
      add(formData).then((data) => {
        console.log(data);
      });
      setTimeout(() => {
        this.goback();
      }, 500);
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    goback() {
      this.$router.push("/home/Drug_administration/Drug_home");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = "";
    }, 1500);
    this.all = this.$route.query;
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>
<style lang="less" scoped>
.chazhao {
  position: absolute;
  right: 0px;
}
.header {
  button {
    line-height: 5px;
    font-weight: bold;
    margin: 10px 6px;
  }
}
.el-form-item {
  display: block;
  float: left;
  width: 50%;
  padding-top: 10px;
  box-sizing: border-box;
}
.el-select {
  width: 100%;
}
hr {
  width: 100%;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>